<template>
  <div class="base-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <community-tree ref="communityTree"  @handleNodeClick="handleNodeClick"/>
      </el-col>
      <el-col :span="20" style="padding: 0px 15px;" class="MessagePanel">
        <div class="topButton">
          <div class="name">
            <p class="classNme">社区管理</p>
            <P class="smallClassName">COMMUNITY MANAGEMENT</P>
          </div>
        </div>
        <div class="line"></div>
        <div class="buttom" style="text-align: end;">
          <el-button class="Btn" size="small" type="topSubButtom" @click="addCommunity()">
            <svg-icon icon-class="add" class="buttonSvg"/>
            区域录入
          </el-button>
          <el-button class="Btn" size="small" type="topSubButtom" @click="deleteCommunity('')">
            <svg-icon icon-class="remove" class="buttonSvg"/>
            删除
          </el-button>
        </div>
        <el-table
            v-if="lastTree>0"
            :data="tableData.slice((data.pageNum - 1) * data.pageSize, data.pageNum * data.pageSize)"
            class="communityTable"
            empty-text="暂无数据"
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%;height: 520px;"
            @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column prop="rangeName" label="区域名称" align="center"/>
          <el-table-column prop="userName" label="区域负责人" align="center"/>
          <el-table-column prop="mobile" label="联系电话" align="center">
            <template #default="scope">
                <span style="">
                  {{ scope.row.mobile }}
                </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button class="Btn" size="small" type="upd" @click="updateCommunity(scope.row)">
                <svg-icon icon-class="edit" class="buttonSvg"/>
              </el-button>
              <el-button class="btn-donate" size="small" type="del" @click="deleteCommunity(scope.row.rangeId)">
                <svg-icon icon-class="del" class="buttonSvg"/>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table
            v-else
            :data="tableData.slice((data.pageNum - 1) * data.pageSize, data.pageNum * data.pageSize)"
            class="communityTable"
            empty-text="暂无数据"
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%;"
            @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column prop="rangeName" label="设备名称" align="center"/>
          <el-table-column prop="userName" label="设备类型" align="center"/>
          <el-table-column prop="mobile" label="设备编号" align="center">
            <template #default="scope">
                <span style="color: #7db3e2">
                  {{ scope.row.mobile }}
                </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button class="Btn" size="small" type="upd" @click="updateCommunity(scope.row)">
                <svg-icon icon-class="edit" class="buttonSvg"/>
              </el-button>
              <el-button class="btn-donate" size="small" type="del" @click="deleteCommunity(scope.row.rangeId)">
                <svg-icon icon-class="del" class="buttonSvg"/>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
              small
              background
              layout="prev, pager, next"
              :current-page="data.currentPage"
              :page-size="data.pageSize"
              :total="tableData.length"
              @current-change="currentChange"
              style="float: left;"/>
          <div class="pageData">
            <span class="tableDataLengh">共 {{ tableData.length }} 条</span>
            <span>每页 {{ data.pageSize }} 条</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <add-community-information ref="add_community_information"/>
    <add-device-dialog ref="add_device_dialog"/>
    <community-principal-dialog ref="community_principal_dialog"/>
  </div>
</template>

<script>

import AddCommunityInformation from "@/views/system/components/AddCommunityInformation.vue";
import CommunityPrincipalDialog from "@/views/system/components/CommunityPrincipalDialog.vue";
import AddDeviceDialog from "@/views/system/components/AddDeviceDialog.vue";
import CommunityTree from "@/components/CommunityTree.vue";

let me;

export default {
  name: "CommunityManagement",
  components: {CommunityTree, AddDeviceDialog, CommunityPrincipalDialog, AddCommunityInformation},
  data() {
    return {
      lastTree: 1,
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'rangeName',
      },
      data: {
        pageNum: 1,
        pageSize: 7,
        currentPage: 1
      },
      expandedList: [0],
      treeList: [],
      selected: [],
    }
  },
  mounted() {
    me = this;
    me.queryData();
    me.$refs.communityTree.selTreeList({actionType:"rangeTreeQuery",route:"range"});
  },
  methods: {
    currentChange(val) {
      this.data.pageNum = val;
      this.data.currentPage = val;
    },
    handleSelectionChange(val) {
      me.selected = val;
    },
    handleNodeClick(tree) {
      me.lastTree = tree.children.length;
      me.parentId = tree.rangeId;
      me.topLevelId = tree.topLevelId;
      if (tree.children) {
        me.tableData = tree.children;
      }
    },
    updateCommunity(row) {
      this.$refs.add_community_information.showDialog(row);
    },
    addCommunity() {
      this.$refs.add_community_information.showDialog('', me.parentId,me.topLevelId);
    },
    addDevice() {
      this.$refs.add_device_dialog.showDialog('', me.parentId);
    },
    async queryData(needReloadTreeList) {
      let response = await this.$asyncPost("range", {
        actionType: "rangeQuery",
        parentId: me.parentId
      });
      if (response.success) {
        me.tableData = response.rangeList;
        if(needReloadTreeList) me.$refs.communityTree.selTreeList({actionType:"rangeTreeQuery",route:"range"}); // 重新获取数据以更新列表
      }
    },
    deleteCommunity(id) {
      if (id == '') {
        if (me.selected.length <= 0) {
          me.$message.warning('请先选择需要删除的区域')
          return;
        }
      }
      this.$confirm("是否删除该所选区域?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      })
          .then(async () => {
            try {
              let response = await this.$asyncPost("range", {
                actionType: "rangeDelete",
                rangeIds: id != '' ? [id] : this.selected.map(item => item.rangeId)
              });
              if (response.success) {
                this.$message.success("删除成功");
                this.queryData(true);
              } else {
                this.$message.error(response.message);
              }
            } catch (error) {
              this.$message.error("删除时发生错误");
            }
          })
          .catch(() => {
            this.$message.info("取消");
          })
    },
  }
}
</script>

<style scoped>
@import "@/styles/variables.scss";
.communityTree {
  background: #151617;
  height: 730px;
  border-radius: 14px;
  margin-right: 20px;
  /*  margin-top: 13px;*/
  /*height: 740px;
  background: url('../../assets/treeBackground.png') 0 0 no-repeat #292a42;
  background-size: 100% 970px;*/
}

.tableList {
  padding: 15px 26px;
  background: rgb(35, 36, 59);
  border-radius: 14px;
  border: 1px solid rgb(45 47 79);
}

</style>